<template>
  <div class="order-view">
     <el-button type="primary" size="small" icon="el-icon-plus" @click="addProductButton">新增</el-button>
      <el-drawer
        title="商品添加"
        :before-close="handleClose"
        :visible.sync="dialogProductAddVisible"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
        >
        <div class="demo-drawer__content">
          <el-form :model="goodsForm" ref="goodsForm">
            <el-form-item label="商品编码: " prop="proCode" :label-width="formLabelWidth">
              <el-input :value="goodsForm.proCode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品名称: " prop="proName" :label-width="formLabelWidth">
              <el-input v-model="goodsForm.proName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品售价: " prop="price" :label-width="formLabelWidth">
              <el-input v-model="goodsForm.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品单位" prop="unitId" :label-width="formLabelWidth">
              <el-select v-model="goodsForm.unitId" placeholder="请选择商品单位">
                <el-option label="个" value="1"></el-option>
                <el-option label="件" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类" prop="typeId" :label-width="formLabelWidth">
              <el-select v-model="goodsForm.typeId" placeholder="请选择商品分类">
                <el-option label="分类1" value="1"></el-option>
                <el-option label="分类2" value="2"></el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="库存预警: " prop="stockWarning" :label-width="formLabelWidth">
              <el-input v-model="goodsForm.stockWarning" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注: " prop="proRemark" :label-width="formLabelWidth">
              <el-input v-model="goodsForm.proRemark" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer" align="center">
            <el-button @click="dialogProductAddVisible = false">取 消</el-button>
            <el-button type="primary" @click="addProduct" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
export default {
  name: "WarehouseProductAdd",
  data() {
    return {
      dialogProductAddVisible: false,
      loading: false,
      goodsForm: {
        proCode: '',
        proName: '',
        typeId: '',
        unitName: '',
        price: '',
        proRemark: '',
        stockWarning: ''
      },
      formLabelWidth: '80px'
    };
  },
  created() {
  
  },
  mounted() {
    
  },
  methods: {
    handleClose() { 
      this.dialogProductAddVisible = false;
    },

    //新增商品
    addProduct() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      this.timer = setTimeout(() => {
        // 动画关闭需要一定的时间
        setTimeout(() => {
          this.loading = false;
        }, 400)
      }, 2000);
      const url = '/api/goods/add'
      const data = this.goodsForm
      console.log(data)
      this.$http
        .post(url, data)
        .then(rs => { 
          if (rs.data.code == "200") {
            this.$message.success('新增成功');
            this.$emit('refreshData');
            this.dialogProductAddVisible = false;
          } else {
            this.$message.error(rs.data.message);
          }
        })
    },

    //新增商品按钮
    addProductButton() {
      this.$nextTick(() => {
        this.$refs['goodsForm'].resetFields();
        this.uuid = uuidv4();
        console.log('Generated UUID:', "SP"+this.uuid); // 添加调试语句 
        this.goodsForm.proCode = "SP"+this.uuid;
      });
      this.dialogProductAddVisible = true;
     },
  },
};
</script>

<style lang="scss">

</style>